<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/轮播图css/lunbo.css">
    <link rel="stylesheet" href="./iconfont/font_5q3o4oeewdl/iconfont.css">
    <link rel="stylesheet" href="./手机端css/shoujicss.css">
</head>

<body>
    <!-- 导航栏盒子，内容是一些基本的导航项目 -->
<div class="pc">    
    <div class="daohang">
        <div class="dal">
            <div class="dall"><a href="">品牌</a></div>
            <div class="dall"><a href="">OriginOs</a></div>
            <div class="dall"><a href="">体验店</a></div>
            <div class="dall"><a href="">官网社区</a></div>
        </div>
        <div class="dar">
            <div class="darr"><a href=""><div class="iconfont">&#xe62e;购物车</div></a></div>
            <div class="darr"><a href="" id="gr">个人中心</a></div>
        </div>

    </div>
    <div class="ggr">
        <ul>
            <li><a href="">登录</a></li>
            <li><a href="">注册</a></li>
        </ul>
    </div>
    <!-- 导航下面的盒子内容可以放置一些导航项目 -->
    <div class="daohang1" id="daohang1">
        <div class="logo">第3小组
        </div><!-- 换商标 -->

        <div class="dhpart ui">
            <ul>
                <li id="xm" class="xm"><a href="">小米系列</a></li>
                <li id="vv" class="vv"><a href="">vivo系列</a></li>
                <li id="op" class="op"><a href="">oppo系列</a></li>
            </ul>
        </div>
        <div class="sear">
            <span class="iconfont"><a href="#">&#xe60d;搜索</a></span>
        </div><!-- 换字体图标,改样式 -->
        <!-- 以下都要插图 -->
        <div class="box fuqi">
            <div class="box1">
                <a href="">
                    <img src="./imges/图1/小米/red mi k70.png" class="xiaomi">
                </a>
                <p>redmi k70</p>
            </div>
            <div class="box2">
                <a href="">
                    <img src="./imges/图1/小米/redmi k70e.png" class="xiaomi">
                </a>
                <p>redmi k70e</p>
            </div>
            <div class="box3">
                <a href="">
                    <img src="./imges/图1/小米/xiaomi civi 4 pro.png" class="xiaomi">
                </a>
                <p>xiaomi civi 4</p>
            </div>
            <div class="box4">
                <a href="">
                    <img src="./imges/图1/小米/xiaomi pad 6s pro 12.4.png" class="xiaomi">
                </a>
                <p>xiaomi pad 6s pro 12.4寸</p>
            </div>
        </div>
        <div class="boxa active fuqi">
            <div class="box1a ">
                <a href="">
                    <img src="./imges/图1/vivo/vivo s17 pro.png" class="vivo">
                </a>
                <p>vivo s17 pro</p>
            </div>
            <div class="box2a">
                <a href="">
                    <img src="./imges/图1/vivo/vivo x100 pro.png" class="vivo">
                </a>
                <p>vivo x100 pro</p>
            </div>
            <div class="box3a">
                <a href="">
                    <img src="./imges/图1/vivo/vivo x90s.png" class="vivo">
                </a>
                <p>vivo x90s</p>
            </div>
            <div class="box4a">
                <a href="">
                    <img src="./imges/图1/vivo/vivo y35m+.png" class="vivo">
                </a>
                <p>vivo y35m+</p>
            </div>
        </div>
        <div class="boxb active fuqi">
            <div class="box1b">
                <a href="">
                    <img src="./imges/图1/oppo/find n.png" class="oppo">
                </a>
                <p>Find N</p>
            </div>
            <div class="box2b">
                <a href="">
                    <img src="./imges/图1/oppo/Find N2.png" class="oppo">
                </a>
                <p>Find N2</p>
            </div>
            <div class="box3b">
                <a href="">
                    <img src="./imges/图1/oppo/find n3.png" class="oppo">
                </a>
                <p>Find N3</p>
            </div>
            <div class="box4b">
                <a href="">
                    <img src="./imges/图1/oppo/find x7.png" class="oppo">
                </a>
                <p>Find x7</p>
            </div>
        </div>
    </div>

    <!-- 正式内容框架，里面的内容用flex布局摆放，以满足作业要求 -->
    <div class="neirong" id="neirong">
        <!-- 这里是第一个摆放位置 -->
        <div class="lunbo" id="lunbo">
            <!-- 此处时=是轮播图 -->
            <div class="btl" style="cursor: pointer;"> &lt </div>
            <div class="btr" style="cursor: pointer;"> &gt </div>
        </div>
        <div class="one" id="one">
            <!-- 这里的样式在one-style.css -->
            <div class="one-con">
                <div class="one-con1">
                    <h1>X Find 系列</h1>
                </div>
                <h2>这么轻，还那么强。</h2>
                <div class="links">
                    <a href="#">
                        <span>了解更多</span>
                        <i></i>
                    </a>
                    <a href="#">
                        <span>立即购买</span>
                        <i></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="two" id="two">
            <div class="two-con">
                <div class="two-con1">
                    <h1>Vivo Pad3 Pro</h1>
                </div>
                <h2>超震撼，超旗舰。</h2>
                <div class="links">
                    <a href="#">
                        <span>了解更多</span>
                        <i></i>
                    </a>
                    <a href="#">
                        <span>立即购买</span>
                        <i></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="four">
            <div class="tx">发现更多</div>
            <div class="by">
                <!-- 左边部分,要图 -->
                <div class="lb">
                    <div class="itl1">
                        <a href="#">
                    </div>
                    <div class="itl2">
                        <a href="#">
                            <div class="itl2-con">
                                <h1>Vivo S18</h1>
                                <h2>棱紫新色，格外绽放。</h2>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- 中间部分,要图 -->
                <div class="cen">
                    <a href="#"></a>
                </div>
                <!-- 右边部分,也要 -->
                <div class="rb">
                    <div class="itg1">
                        <a href="#"></a>
                    </div>
                    <div class="itg2">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 这里是手机端新增的div -->
        <div class="phoneneirong1">
            <span><br><br>VIVO Pad3 Pro <br><br>
            超震撼，超旗舰。</span>
        </div>
        <div class="phoneneirong2">
            <span>
                <br>
                X Find 系列
                <br>
                <br>
                这么轻，还那么强。
            </span>
        </div>
        <!-- 分割线—————————————— -->
        <div class="five">
            <div>
                <a class="jieshao" href="https://www.bilibili.com/video/BV1zE421G7yF/?spm_id_from=333.337.search-card.all.click&vd_source=84740cf8ff551ac96e31eba141be0f53">
                    了解产品
                    <span class="iconfont">&#xe60c;</span>
                    (介绍视频)
                </a>
            </div>
            <div>
                <a href="">
                    在线购买
                    <span class="iconfont">&#x1010f;</span>
                </a>
            </div>
            <div>
                <a href="">
                    服务支持
                    <span class="iconfont">&#xe62f;</span>
                </a>
            </div>
            <div>
                <a href="">
                    商务合作
                    <span class="iconfont"> &#xe61f;</span>
                </a>
            </div>
            <div class="five-item">
                <a href="https://gitee.com/chen-zanji/creating-web-group-assignments">
                    关于我们
                    <span class="iconfont">&#xe797;</span>
                    (代码仓库)
                </a>
            </div>
            <div>
                <a href="">
                    在线客服
                    <span class="iconfont"> &#xe677;1111-5000</span>
                </a>
            </div>
            <div>
                <a href="">
                    服务热线
                    <span class="iconfont"> &#xe633;1234-5678</span>
                </a>
            </div>
            <div>
                <a href="">
                    关注我们
                    <span class="iconfont"> &#xe7ba;</span>
                    <span class="iconfont"> &#xe618;</span>
                    <span class="iconfont"> &#xe631;</span>
                    <span class="iconfont"> &#xe65a;</span>
                </a>
            </div>
        </div>
    </div>


    <!-- 这里是首页的遮罩 -->
    <div class="zhezhao">
        <div class="zznt">
            <span>看前须知！！</span>
            <span>小组分工如下 &darr; &darr; &darr; <br>
                html及其框架：陈赞吉，陈建宇<br>
                css部分：罗乐，覃俊辉<br>
                js部分：陈赞吉，陈建宇<br>
                图片素材整理：周鑫鹏<br>
                介绍视频录制：李佳翔<br>
                代码仓库在网页最下方的关于我们</span><br>
                <a href="https://www.bilibili.com/video/BV1zE421G7yF/?spm_id_from=333.337.search-card.all.click&vd_source=84740cf8ff551ac96e31eba141be0f53">
                    点击这里跳转至介绍视频
                </a><br>
                <a href="../主页.html">点击此处查看其它css作业</a>
                <div class="guanbi">X</div>
        </div>
    </div>
    

    <div class="tiaozhuan">
        <a href="../主页.html">其 <br>他 <br>css <br>作 <br>业</a>
    </div>
    <script>
        // 此处是控制导航栏下方横条效果的js
        let daohang1 = document.querySelector('.daohang1')
        let daohang11 = document.getElementById('daohang1')
        let daohang = document.querySelector('.daohang')

        let i = 0
        document.addEventListener('mousewheel', function (e) {
            if (e.wheelDelta > 0) {
                i--
                if (i < 0) {
                    i = 0
                }
            } else if (e.wheelDelta < 0) {
                i++
            }
            if (i >= 1) {
                daohang1.classList.add("dh1")
                daohang.classList.add("yincang")
            } else if (i < 1) {
                daohang1.classList.remove("dh1")
                daohang.classList.remove("yincang")
            }
        })

        let dhpart = document.querySelectorAll('.dhpart ul li')
        let box1 = document.querySelector('.box')
        let box1a = document.querySelector('.boxa')
        let box1b = document.querySelector('.boxb')
        for (let j = 0; j < dhpart.length; j++) {
            let dh = dhpart[j]
            console.log(j);
            dh.addEventListener('mouseenter', function () {
                daohang11.style.height = '500px'
                if (j === 0) {

                    box1.classList.remove('active')
                    box1a.classList.add('active')
                    box1b.classList.add('active')

                } else if (j === 1) {

                    box1a.classList.remove('active')
                    box1.classList.add('active')
                    box1b.classList.add('active')

                } if (j === 2) {
                    box1b.classList.remove('active')
                    box1.classList.add('active')
                    box1a.classList.add('active')
                }
            })
            daohang1.addEventListener('mouseleave', function () {
                daohang11.style.height = '80px'
            })
        }
        // 以下是轮播图的js
        let lunbo = document.querySelector('.lunbo')
        let last = document.querySelector('.btl')
        let next = document.querySelector('.btr')
        let bg = [
            { url: './background1.jpg' },
            { url: './background2.jpg' },
            { url: './background3.jpg' },
            { url: './background4.jpg' }
        ]
        let k = 0
        function nn() {
            k++
            if (k == 4) {
                k = 0
            }
            else if (k == -1) {
                k = 3
            }
            lunbo.style.backgroundImage = `url(${bg[k].url})`
        }
        let qidong = setInterval(nn, 3000)
        last.addEventListener('click', function () {
            k--
            if (k <= 0) {
                k = 3
            }
            lunbo.style.backgroundImage = `url(${bg[k].url})`
            console.log(1);
        })
        next.addEventListener('click', function () {
            k++
            if (k > 3) {
                k = 0
            }
            lunbo.style.backgroundImage = `url(${bg[k].url})`
        })
        let guanbi = document.querySelector('.guanbi')
        let zhezhao = document.querySelector('.zhezhao')
        guanbi.addEventListener('click',function(){
            zhezhao.style.display = 'none'
        })
    </script>
</div>



</body>

</html>